<template>
  <!-- 在线api方式创建图标 -->
  <Icon v-if="/^\w+:/.test(name)" :icon="name" :style="transformStyle" class="svg-icon" />
  <svg v-else :style="transformStyle" class="svg-icon" aria-hidden="true">
    <use :href="`#icon-${name}`" />
  </svg>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Icon } from '@iconify/vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  flip: {
    type: String,
    validator(value) {
      return ['', 'horizontal', 'vertical', 'both'].includes(value)
    },
    default: '',
  },
  rotate: {
    type: Number,
    validator(value) {
      return value >= 0 && value <= 360
    },
    default: 0,
  },
})

const transformStyle = computed(() => {
  let style = []
  if (props.flip !== '') {
    switch (props.flip) {
      case 'horizontal':
        style.push('rotateY(180deg)')
        break
      case 'vertical':
        style.push('rotateX(180deg)')
        break
      case 'both':
        style.push('rotateX(180deg)')
        style.push('rotateY(180deg)')
        break
    }
  }
  if (props.rotate !== 0) {
    style.push(`rotate(${props.rotate}deg)`)
  }
  return `transform: ${style.join(' ')};`
})
</script>

<style lang="scss">
svg:not(:root).svg-icon {
  overflow: visible;
}

.svg-icon {
  display: inline-block;
  font-size: inherit;
  width: 1em;
  // height: 1em;
  overflow: visible;
  vertical-align: middle;
  fill: currentColor;

  &.md {
    font-size: 18px;
    vertical-align: -0.23em;
  }

  &.lg {
    font-size: 20px;
  }

  &.xl {
    font-size: 24px;
  }

  &.xxl {
    font-size: 40px;
  }
}
</style>
